<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>聊天</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
    <style>
        .body {
            background-color: #F0EFF5;
        }

        .time {
            width: 60px;
            text-align: center;
            margin: auto;
            background-color: #d3d3d3;
            color: #fff;
            margin-top: 30px;
            font-size: 12px;
            font-family: '微软雅黑';
            border-radius: 3px;
        }

        .chat-book {
            max-width: 60%;
            background-color: #F4D5C3;
            float:right;
            border-radius: 3px;
            margin-right: 5%;
            border: solid 1px #F9B07B;
            padding: 10px 10px 10px 10px;
            font-family: '微软雅黑';
            font-size: 16px;
            font-weight: 600;
            position: relative;
        }

        .chat-book:before {
            content: "";
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-left-color: #F9B07B;
            position: absolute;
            left: 100%;
            top: 20%;
            margin-top: 0px;
        }

        .chat-book:after {
            content: "";
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: #F4D5C3;
            position: absolute;
            left: 100%;
            top: 20%;
            margin-top: 2px;
        }
        .chat-book-left {
            max-width: 60%;
            background-color: #F4D5C3;
            float: left;
            border-radius: 3px;
            margin-left: 5%;
            border: solid 1px #F9B07B;
            padding: 10px 10px 10px 10px;
            font-family: '微软雅黑';
            font-size: 16px;
            font-weight: 600;
            position: relative;
        }

        .chat-book-left:before {
            content: "";
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-right-color: #F9B07B;
            position: absolute;
            right: 100%;
            top: 20%;
            margin-top: 0px;
        }

        .chat-book-left:after {
            content: "";
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-right-color: #F4D5C3;
            position: absolute;
            right: 100%;
            top: 20%;
            margin-top: 2px;
        }

        .chat-width {
            width: 100%;
            height: auto;
            margin-top: 20px;
        }

        .chat-bottom {
            background-color: #fff;
            width: 100%;
            margin: auto;
            height: 50px;
            position: fixed;
            bottom: 0;
            max-width: 640px;
        }

        .chat-input {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: solid 1px #e0e0e0;
            margin-top: 4px;
            font-size: 14px;
            padding-left: 5px;
        }

        .chat-img {
            width: 50px;
            height: 50px;
        }

        .chat-right {
            float: right;
            margin-right: 10px
        }
        .chat-left{
            float: left;
            margin-left: 10px}

        .chat-img-bottom {
            width: 30px;
            height: 30px;
            margin-top: 10px;
            margin-left: 20px;
        }

        .chat-img-bottom-right {
            width: 40px;
            height: 30px;
            margin-top: 10px;
            margin-right: 10px;
            line-height: 30px;
            font-size: 14px;
            border: solid 1px #A5A9AC;
            text-align: center;
            border-radius: 5px; 
        }

        .f-left {
            float: left;
            width: 15%;
            margin-left: 3%;    
        }

        .f-right {
            float: right;
            width: 18%;
            margin-left: 2%;
        }

        .input-book {
            width: 55%;
            margin-left: 2%;
            float: left;
        }
    </style>
</head>

<body class="bg-gray body">
    <div class="time">
        15:30
    </div>
    <div class="chat-width">
            <div class="chat-right">
                    <img src="../images/boss-label/14.png" class="chat-img">
                </div>
        <div class="chat-book">你好，我是微街推的小慧，欢迎进入我的名片，有什么可以帮到你的吗？你可以在这里跟我实时沟通。
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="time">
        15:30
    </div>
    <div class="chat-width">
            <div class="chat-left">
                    <img src="../images/boss-label/14.png" class="chat-img">
                </div>
        <div class="chat-book-left">你好，杨是东方会计师法开始电话费快速的核辐射的后方可总。
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="time">
        15:30
    </div>
    <div class="chat-width">
            <div class="chat-right">
                    <img src="../images/boss-label/14.png" class="chat-img">
                </div>
        <div class="chat-book">你好你可。
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="time">
        15:30
    </div>
    <div class="chat-width">
            <div class="chat-right">
                    <img src="../images/boss-label/14.png" class="chat-img">
                </div>
        <div class="chat-book">你好，杨总。
        </div>
       
    </div>
    <div style="margin-bottom: 100px;"></div>
    <div class="chat-bottom">
        <div class="input-book">
            <input type="text" placeholder="" class="chat-input">
        </div>
        <div class="f-left">
            <img src="../images/boss-label/4.png" alt="" class="chat-img-bottom">
        </div>
        <div class="f-right chat-img-bottom-right">
            发送
        </div>
    </div>
</body>

</html>